html,body,input,ul,li,div,span,button,h1,h2,h3,h4,h5,h6,p{
  padding: 0;
  margin: 0;
}
ul li{
  list-style: none;
}
input,button{
  border:none;
  outline:none;
  border:1px solid #ddd;
  border-radius: 4px;
}
button{
  cursor: pointer;
}
button:hover{
  opacity: .8;
}
.todolist-box{
  width: 400px;
  margin: 20px auto;
  overflow: hidden;
}
.input{
  height: 22px;
  line-height: 22px;
  text-indent: 10px;
}
.todolist-box button{
  padding: 0 10px;
  color: #ffffff;
}
.todolist-box ul li{
  width: 400px;
  height: 30px;
  line-height: 30px;
  /* overflow: hidden; */
  background: #fafafa;
  margin-top: 10px;
  border-radius: 2px;
}
.todolist-box ul li span{
  float: left;
  display: block;
  width: 290px;
  height: 22px;
  /* overflow: hidden; */
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 10px;
  color: #448aff;
}
.todolist-box ul li button{
  float:right;
  margin-top: 3px;
  margin-right: 5px;
  background: #ff5252;
  line-height: 22px;
}